<template>
	<div>
		<div class="topone">
			<div class="quit"><</div>
			<div style="text-align: center;">
				<input class="text" type="text" name="" id="iptone" value="" placeholder="搜索你想要的" />
			</div>
		</div>
		<div class="toptwo">
				<div class="bor"  v-for="item in list_">
					<router-link tag="a" :to="item.link" href="">{{item.name}}</router-link>
				</div>	
		</div>
	</div>
</template>

<script>
	export default{
		data() {
			return{
				list_:[{
					id:1,
					name:'综合',
					link:'/'
				},{
					id:2,
					name:'销量',
					link:'/home2'
				},{
					id:3,
					name:'价格',
					link:'/home3'
				}],
			}
		}
	}
</script>

<style>
	.topone{
		width: 100%;
		height: 50px;
		border-bottom: 2px solid rgba(0,0,0,.1);
	}
	.quit{
		float: left;
		font-size: 30px;
	}
	#iptone{
		background-color: rgb(245, 245, 247);
		height: 20px;
		margin: 8px auto;
		width: 87%;
		outline:none;
		border: none;
		border-radius: 5px;
		font-family: iconfont;
	}
	
	.toptwo{
		width: 100%;;
		height: 60px;
		overflow: hidden;
	}
	.bor{
		width: 33.33%;
		overflow: hidden;
		float: left;
		border-bottom: 5px solid rgba(0,0,0,.1);;
	}
	.toptwo .bor a{
		display: block;
		line-height: 40px;
		font-size: 14px;
		color: black;
		text-align: center;
	}
	.toptwo .bor a:hover{
		color: blue;
		display: block;
	}
</style>
